const n = `<!--
 * @Author: Quarter
 * @Date: 2023-09-19 15:26:32
 * @LastEditors: Quarter
 * @LastEditTime: 2024-12-12 15:06:50
 * @FilePath: /simple-ui/packages/documents/src/views/desktop/popover/default-popover.vue
 * @Description: 弹出层默认示例
-->
<template>
  <s-flex direction="column" align-items="center" gap="5em">
    <s-flex justify-content="center" gap="1em">
      <s-radio
        v-for="position of positionList"
        v-model="options.position"
        :key="\`position-radio-\${position.position}\`"
        :label="position.position"
        >{{ position.label }}</s-radio
      >
    </s-flex>
    <!-- 点击触发示例 -->
    <s-button id="click-button" theme="primary" @click="options.visible = true">点击触发</s-button>
    <s-popover
      target="#click-button"
      :visible.sync="options.visible"
      trigger="click"
      :position="options.position"
      special-class="article-popover"
      with-arrow
    >
      <s-flex direction="column" gap="0.5em">
        <div class="article-title">《{{ article.title }}》</div>
        <div class="article-author">{{ article.author }}</div>
        <div class="article-content">
          <ul>
            <li v-for="(sentence, index) of article.content" :key="\`sentence-item-\${index}\`">
              {{ sentence }}
            </li>
          </ul>
        </div>
      </s-flex>
    </s-popover>
  </s-flex>
</template>

<script lang="ts">
import { Component, Vue } from "vue-property-decorator";

@Component
export default class DefaultPopover extends Vue {
  /**
   * @description: 位置列表
   * @private
   * @readonly
   * @type {Array<Object>}
   */
  readonly positionList = [
    { position: "top", label: "上方" },
    { position: "bottom", label: "下方" },
    { position: "left", label: "左侧" },
    { position: "left-top", label: "左上方" },
    { position: "left-bottom", label: "左下方" },
    { position: "right", label: "右侧" },
    { position: "right-top", label: "右上方" },
    { position: "right-bottom", label: "右下方" },
  ];

  /**
   * @description: 一篇文章
   * @private
   * @readonly
   * @type {Object}
   */
  readonly article = {
    title: "菩提偈",
    author: "惠能",
    content: [
      "菩提本无树，明镜亦非台。\\n佛性常清净，何处有尘埃！",
      "身是菩提树，心为明镜台。\\n明镜本清净，何处染尘埃！",
      "菩提本无树，明镜亦非台。\\n本来无一物，何处惹尘埃！",
      "菩提只向心觅，何劳向外求玄？\\n听说依此修行，西方只在目前！",
    ],
  };

  /**
   * @description: 组件配置项
   * @private
   * @type {Object}
   */
  options = {
    position: "bottom", // 弹出层位置
    visible: false, // 点击触发弹出层显隐
  };
}
<\/script>

<style lang="scss">
.article-popover {
  padding: 0.5em 1em;
  text-align: center;
  white-space: pre-wrap;

  .article-title {
    font-size: 1.2em;
    font-weight: bold;
  }

  .article-author {
    font-size: 0.9em;
  }

  .article-content {
    ul {
      padding: 0;
      list-style: none;
      margin: 0;
    }

    li:nth-child(n + 2) {
      margin-top: 1em;
    }
  }
}
</style>
`; export { n as default };
